<template>
    <div class="login" :class="SERIES">
        <div class="logo"><img :src="handleChange" alt=""></div>
        <main>
            <div class="port-group">
                <div class="port pointer" @click="loginInfo.port = 'admin'"
                     :class="{'selected':loginInfo.port === 'admin'}">管理员
                </div>
                <div class="port pointer" @click="loginInfo.port = 'teacher'"
                     :class="{'selected':loginInfo.port === 'teacher'}">教师
                </div>
                <div class="port pointer" @click="loginInfo.port = 'student'"
                     :class="{'selected':loginInfo.port === 'student'}">学生
                </div>
            </div>
            <p class="title">登录</p>

            <!--账号-->
            <n-config-provider :theme-overrides="themeOverrides">
                <n-input
                    v-model:value="loginInfo.account"
                    type="text"
                    placeholder="输入账号"
                    @keyup.enter="login"
                    :autosize="{
                        minRows: 3,
                        maxRows: 5
                    }"
                />
                <!--密码-->
                <n-input
                    v-model:value="loginInfo.password"
                    type="password"
                    placeholder="输入密码"
                    @keyup.enter="login"
                    :autosize="{
                        minRows: 3,
                        maxRows: 5
                    }"/>

                <!--登录按钮-->
                <n-button size="large" @click="login" :disabled="!verification()">登录</n-button>
            </n-config-provider>
            <n-divider>
                {{ company_name }}
            </n-divider>

        </main>
    </div>
</template>

<script setup>
import workApi from "@/http/workApi";
import {useUserStore} from "@/stores/user";
import router from "@/router";
import {SERIES} from "@/assets/server";

const user = useUserStore()

// 把提示信息组件功能挂载到window
window.$message = useMessage()
// 端口列表
let songs = [
    {
        value: "admin",
        label: "管理员"
    },
    {
        value: 'teacher',
        label: '教师'
    },
    {
        value: 'student',
        label: '学生'
    },
]
// 登录需要的信息
let loginInfo = reactive({
    port: 'teacher',
    account: '',
    password: ''
})
// 验证信息是否填写完毕正确
let verification = () => {
    // 判断账号密码是否填写
    return loginInfo.account !== '' && loginInfo.password !== ''
}
let login = () => {
    if (loginInfo.account === '' || loginInfo.password === '') {
        return
    }
    workApi.post('login', loginInfo).then((res) => {
        // 登录状态为成功
        if (res['success']) {
            // 更新身份 ,更新验证状态,更新token
            user.setIdentity(res['who'])
            user.setInfo({
                name: res['name'],
                phone: res['phone'],
                account: res['account'],
                head: res['head']
            })
            user.setIsVerification()
            user.setToken(res['token']);
            // 跳转到身份对应的页面
            router.push({path: '/' + res['who']})
        }
    });
}

const color = {
    first: {
        theme: "#EE3129",
        bgColor: "#1C1E2B",
        bgColorNone: "#28293d",
        textColor: "#E5E7FF"
    },
    second: {
        theme: "#0090FF",
        bgColor: "#1E2635",
        bgColorNone: "#18202c",
        textColor: "#E5E7FF"
    },
    third: {
        theme: "#535493FF",
        bgColor: '#FFFFFF',
        bgColorNone: "#F4F5FF",
        textColor: "#000000"

    }
}

const themeOverrides = {
    common: {
        primaryColor: color[SERIES].theme,
        primaryColorHover: color[SERIES].theme
    },
    Input: {
        textColor: color[SERIES].textColor
    }
}

// function handleChange() {
//
// }
const handleChange = computed(()=>{
    const val = `LOGO-${SERIES}`
    return new URL(`/src/assets/login/${val}.png`, import.meta.url)
})
const company_name = computed(() => {
    const name = {
        "first":"深圳市兆阳信息技术研究院",
        "second":"深圳市兆阳信息技术研究院",
        "third":"有道商创（深圳）科技有限公司"
    }
    return name[SERIES]
})
</script>

<style scoped lang="less">
//登录页面
.login {
    --color-background-none: v-bind('color[SERIES].bgColorNone');
    --login-color-text: #6B7183;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-position: right;
    background-size: 100% 100%;
    // logo
    .logo {
        position: absolute;
        top: 41px;
        left: 52px;
        width: 368px;
        height: 37px;

        img {
            height: 100%;
        }
    }

    //中间主体框
    main {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 23.7%;
        left: 58.28%;
        width: 423px;
        height: 567px;
        background-color: v-bind('color[SERIES].bgColor');

        .port-group {
            display: flex;
            height: 10%;

            .port {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: 0.2s;
                color: var(--login-color-text);
                background-color: var(--color-background-none);

                &.selected, &:hover {
                    background-color: v-bind('color[SERIES].bgColor');
                    font-size: 14px;
                    color: v-bind('color[SERIES].textColor');
                }
            }
        }

        .title {
            position: absolute;
            top: 20.28%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 24px;
            color: v-bind('color[SERIES].textColor');

        }

        .n-config-provider {
            position: absolute;
            top: 193px;
            left: 50%;
            transform: translate(-50%, 0);

            .n-input {
                width: 347px;
                height: 48px;
                margin: 0 auto 35px auto;
                background-color: var(--color-background-none);
                color: white;

                &::placeholder {
                    color: var(--login-color-text);
                }
            }

            .n-button {
                position: absolute;
                top: 200px;
                left: 50%;
                transform: translate(-50%, 0);
                width: 347px;
                height: 48px;
                background-color: v-bind('color[SERIES].theme');
                color: white;
            }
        }


        .n-divider {
            position: absolute;
            top: 85.53%;
            left: 50%;
            transform: translate(-50%, 0);
            font-size: 10px;
            color: v-bind('color[SERIES].textColor');
        }

    }
}

.first {
    background-image: url("@/assets/login/bg-first.jpg");

}

.second {
    background-image: url("@/assets/login/bg-second.jpg");
}

.third {
    background-image: url("@/assets/login/bg-third.jpg");

}

</style>